<template>
	<view class="main">
		<view>
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar title="" @rightClick="rightClick" :autoBack="true">
			</u-navbar>
		</view>
		<!-- 轮播图 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration" v-if="data1.marketInfo">
				<swiper-item v-if="data1.marketInfo">
					<view class="swiper-item">
						<view class="swiper-item uni-bg-red"><u-image :src="data1.marketInfo.firstImg"
								:lazy-load="true"></u-image></view>
					</view>
				</swiper-item>
				<swiper-item v-for="item in data1.marketInfo.secondImgs">
					<u-image :src="item" :lazy-load="true"></u-image>
				</swiper-item>
			</swiper>
		</view>
		<view class=""
			style="background-color: white;padding: 18rpx;border-radius: 18rpx;margin: 18rpx 0;box-shadow: 0 0 10px -4px gainsboro;">
			<view class="" style="display: flex;align-items: center;margin-top: 18rpx;" v-if="data1.marketInfo">
				<text v-if="data1.marketInfo"
					style="font-size: .7rem;padding: 2rpx 8rpx;background-color: #d92818;color: whitesmoke;border-radius: 8rpx;margin-right: 12rpx;width: 60rpx;text-align: center;">{{data1.marketInfo.bussinessTags[0]}}</text>
				<text style="font-size: 1rem;font-weight: bold;">{{data1.marketInfo.title}}</text>
			</view>
			<view class="" style="margin: 18rpx 0;" v-if="data1.priceInfo">
				<view class="" style="display: flex;justify-content: space-between;">
					<text
						style="color: #d92818;font-size: 1.1rem;font-weight: bold;">￥{{data1.priceInfo.minPrice}}</text>
					<text style="font-size: .9rem;color: #888;">销量：{{data1.saleInfo.sales}}件</text>
				</view>
			</view>
		</view>
		<view class="" @click="show=true"
			style="background-color:#f7f7f7;padding: 6rpx 18rpx;font-size: .9rem;display: flex;align-items: flex-start;flex-wrap: wrap;justify-content: flex-start;margin-bottom: 20rpx;">
			<view class="" v-for="item in data1.tags" style="display: flex;align-items: center;margin-right: 18rpx">
				<u-badge :isDot="true" type="error " style="margin-right: 14rpx;"></u-badge>
				<text>{{item.tagName}}</text>
			</view>
		</view>
		<view class="" v-if="data1.marketInfo">
			<text style="margin: 18rpx 0;font-size: .9rem;">{{data1.marketInfo.subTitle}}</text>
		</view>
		<u-popup :show="show" :round="8" mode="bottom" @close="close">
			<text style="text-align: center;margin-top: 28rpx;font-weight: bold;">服务保障</text>
			<view class="" @click="show=true" v-for="item in data1.tags"
				style="margin: 18rpx 0;background-color:white;padding: 6rpx 18rpx;font-size: .9rem;height: 120rpx;display: flex;flex-direction:column;justify-content: center;">
				<view class="" style="display: flex;align-items: center;">
					<u-badge :isDot="true" type="error " style="margin-right: 14rpx;"></u-badge>
					<text style="font-size: 1rem;">{{item.tagName}}</text>
				</view>
				<text style="font-size: .85rem;color: #888;">{{item.tagIntro}}</text>
			</view>
		</u-popup>
		<!-- 评价 -->
		<view class="" style="margin: 18rpx 0;background-color: white;padding: 18rpx;">
			<view class="" style="display: flex;justify-content: space-between;">
				<view class="" style="display: flex;align-items: center;">
					<text style="font-weight: bold;">商品评价</text><text
						style="font-size: .8rem;">（{{comments.total}}）</text>
				</view>
				<view class="" style="display: flex;align-items: center;" @click="goComment">
					<text style="font-size: .9rem;">查看全部</text>
					<img src="https://img.icons8.com/fluency/48/connection-status-off.png" alt=""
						style="width: 34rpx;height: 34rpx;margin-left: 10rpx;" />
				</view>
			</view>
			<view class="" v-if="comments.total==0" style="margin-top: 18rpx;">
				<text>暂无评价</text>
			</view>
			<view class="" v-else>
				<view v-if="comments.commentInfo">
					<view class="" v-for="item in comments.commentInfo.comments" style="display: flex;margin: 26rpx 0;">
						<view class="">
							<image :src="item.userInfo.avatar" mode="" style="width: 76rpx;height: 76rpx;"></image>
						</view>
						<view class="" style="margin-left: 18rpx;width: 100%;">
							<view class="" style="display: flex;justify-content: space-between;">
								<text style="font-size: .9rem;font-weight: bold;">{{item.userInfo.nick}}</text>
								<text style="color: #888;font-size: .8rem;">{{item.comment.commentDate}}</text>
							</view>
							<u-rate v-model="item.comment.rank" readonly size="14"></u-rate>
							<view class="" style="margin:20rpx 0;">
								<text style="word-break: break-all;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;">{{item.comment.content}}</text>
								<view class="" style="margin-top: 20rpx;">
									<image v-for="img in item.comment.medias" :src="img" mode=""
										style="width: 150rpx;height: 150rpx;"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 店铺 -->
		<view class=""
			style="display: flex;align-items: center;margin: 30rpx 0;background-color: white;padding: 18rpx;">
			<view class="">
				<image :src="detailShop.icon" mode="" style="width: 90rpx;height:90rpx;border-radius: 10rpx;"></image>
			</view>
			<view class="" style="margin-left: 16rpx;">
				<text style="font-weight: bold;">{{detailShop.name}}\n</text>
				<text style="font-size: .8rem;color: #888;">月售{{detailShop.monthlySales}}</text>
			</view>
			<view class="" style="flex: 1;text-align: right;">
				<text @click="moveStore"
					style="color: #d92818;border: 1px solid;padding: 2rpx 18rpx;border-radius: 10rpx;font-size: .9rem;">进入店铺</text>
			</view>
		</view>
		<view class="" style="display: flex;justify-content: space-between;">
			<view v-for="item in detailShop.goodsList" style="width: 33%;" @click="moveShop(item)">
				<image :src="item.img" mode="" style="width:220rpx;height: 220rpx;border-radius: 18rpx;"></image>
				<view class="">
					<text
						style="word-break: break-all;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;font-size: .9rem;">{{item.title}}</text>
					<view class="">
						<text style="font-size: .9rem;color: #d92818;font-weight: bold;">￥{{detailShop.goodsList[0].minPrice}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 详细 -->
		<view class="message" v-if="data1.marketInfo" style="margin-top: 40rpx;">
			<view class="" v-html="data1.marketInfo.intro">
			</view>
		</view>
		<!--  -->
		<view class="control">
			<button @click='move'>立即购买</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pid: "",
				data1: Object,
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,
				show: false,
				comments: Object,
				marketInfo: "",
				detailShop: Object
			}
		},
		onLoad() {
			let routes = getCurrentPages()
			this.pid = routes[routes.length - 1].options.pid
			uni.request({
				url: "https://app-gw.juaiyouxuan.com/api-bff/openapi/product/detail?id=" + this.pid,
				success: (res) => {
					this.data1 = res.data.data

					uni.request({
						url: "https://app-gw.juaiyouxuan.com/api-bff/openapi/product/detail-shop?productId=" +
							this.pid + "&shopId=" + this.data1.marketInfo.shopId,
						success: (res) => {
							this.detailShop = res.data.data
						}
					})
				}
			})
			uni.request({
				url: "https://app-gw.juaiyouxuan.com/api-bff/openapi/product/detail-comment?productId=" +
					this.pid,
				success: (res) => {
					this.comments = res.data.data
				}
			})
		},
		methods: {
			close() {
				this.show = false
			},
			leftClick() {
				uni.navigateBack()
			},
			move() {
				location.href = "https://market.m.taobao.com/app/starlink/wakeup-transit/pages/download?star_id=3027"
			},
			moveShop(item) {
				uni.navigateTo({
					url: '/pages/street/shopInfo/shopInfo?pid=' + item.productId
				})
			},
			moveStore() {
				uni.navigateTo({
					url: '/pages/street/shopInfo/storeInfo/storeInfo?shopId=' + this.detailShop.shopId
				})
			},
			goComment() {
				uni.navigateTo({
					url: '/pages/street/shopInfo/storeInfo/comment?productId=' + this.pid
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.main {
		padding: 0 18rpx;
		margin-top: 88rpx;
		background-color: var(--bgcolor);
	}

	/deep/ .u-image {
		width: 100% !important;
	}

	/deep/ .u-image__image {
		width: 100% !important;
	}

	.swiper {
		height: calc(100vw*11/16);
		width: 100%;
	}

	.u-popup__content {
		>view {
			padding: 30rpx;
			height: 24vh;

			view:nth-child(1) {
				text-align: center;
				margin: 10rpx 0;

				text:nth-child(1) {
					font-weight: bold;
				}
			}
		}
	}

	.control {
		position: fixed;
		bottom: 10rpx;
		left: 0;
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;

		button {
			background-color: #ff575a;
			color: whitesmoke;
			font-size: .85rem;
			border-radius: 34rpx;
		}
	}

	/deep/.message {
		img {
			width: 100%;
		}
	}
</style>